import { View, Text, Image } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import chargeImg from '@/assets/images/user/icon/charge@2x.png';
import packageImg from '@/assets/images/user/icon/package@2x.png';
import waitTimeImg from '@/assets/images/user/icon/wait-time@2x.png';
import onCarImg from '@/assets/images/user/icon/on-car@2x.png';
import Taro from '@tarojs/taro';

import './style.scss';

const orderTypeList = [
  {
    img: chargeImg,
    title: '全部',
    type: 0,
  },
  {
    img: packageImg,
    title: '待付款',
    type: 1,
  },
  {
    img: waitTimeImg,
    title: '待收货',
    type: 2,
  },
  {
    img: onCarImg,
    title: '已完成',
    type: 3,
  },
];
/**
 * 商品/秒杀 订单
 * 传递1是商品  2是服务 3是秒杀的
 * @returns
 */
const GoodOrder = ({type,name}) => {
  const onGoOrderList = (order_status) => {
    Taro.navigateTo({
      url: `/subPages/order/index?order_status=${order_status}&type=${type}`,
    });
  };
  return (
    <View className="good-order-wrap">
      <View className="title-wrap">
        <Text className="title">{name}</Text>
        <View className="view-more" onClick={() => onGoOrderList(0)}>
          <Text>查看全部</Text>
          <AtIcon value="chevron-right" size={14} />
        </View>
      </View>
      <View className="type-list">
        {orderTypeList.map((item, index) => (
          <View
            key={index}
            onClick={() => {
              onGoOrderList(item.type);
            }}
            className="order-type-item"
          >
            <Image mode="aspectFill" src={item.img} />
            <Text>{item.title}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};
export default GoodOrder;
